<!DOCTYPE html>
<html>
    <head>
        <title>MappaPalazzetto</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="CSS/bubble.css" />
        <script type="text/javascript" src="bubble.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="style.css"/> -->
    </head>
    <body> 
        <div id="container">
            <div id="header">
                <p>MFM SPORTING & EVENT CLUB</p>
            </div>
            <div id="menu">

            </div>
            <div id="content">
                <div id="mappapalazzetto">
                    Seleziona settore:<br>
                    <map id="palazzetto_map" name="palazzetto_map">
                        <area shape="rect" alt="" title="" coords="85,34,333,68" href="secondoanelloarancio" target="_blank" onmousemove="showToolTip(event,'Secondo anello arancio' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()" />
                        <area shape="rect" alt="" title="" coords="86,70,333,104" href="primoanelloblu" target="_blank" onmousemove="showToolTip(event,'Primo anello blu' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="rect" alt="" title="" coords="385,156,420,327" href="primoanelloverde" target="_blank" onmousemove="showToolTip(event,'Primo anello verde' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="rect" alt="" title="" coords="423,156,460,327" href="secondoanellogiallo" target="_blank" onmousemove="showToolTip(event,'Secondo anello giallo' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="rect" alt="" title="" coords="84,380,336,413" href="primoanelloblu" target="_blank" onmousemove="showToolTip(event,'Primo anello blu' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="rect" alt="" title="" coords="84,416,336,450" href="secondoanelloarancio" target="_blank" onmousemove="showToolTip(event,'Secondo anello arancio' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="rect" alt="" title="" coords="120,153,337,329" href="parterre" target="_blank" onmousemove="showToolTip(event,'Parterre' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="poly" alt="" title="" coords="387,331,461,333,445,383,421,415,390,438,363,449,341,452,340,381,362,375,379,362,387,348,387,348,390,332" href="curvarossa" target="_blank" onmousemove="showToolTip(event,'Curva Rossa' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                        <area shape="poly" alt="" title="" coords="340,34,371,41,403,57,433,84,453,117,460,149,385,148,385,138,381,130,369,114,354,109,339,106,340,36" href="curvarossa" target="_blank" onmousemove="showToolTip(event,'Curva Rossa' + '<br>' + 'Posti disponibili:XXXX');return false" onmouseout="hideToolTip()"/>
                    </map>            
                    <img src="palazzetto.jpg" alt="palazzetto_map" usemap="#palazzetto_map" width="484" height="480">
                </div>
            </div>
            <div id="footer">

            </div>
        </div>
        <div id="bubble_tooltip">
            <div class="bubble_top"><span></span></div>
            <div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
            <div class="bubble_bottom"></div>
        </div>
    </body>
</html>
